<template>
    <HeaderVue></HeaderVue>
    <main>
      <ul>
        <li :class="{ active: num === 0 }" @click="setNun(0)">商品</li>
        <li :class="{ active: num === 1 }" @click="setNun(1)">评价</li>
        <li :class="{ active: num === 2 }" @click="setNun(2)">商家</li>
      </ul>
      <div>
        <router-view></router-view>
      </div>
      
    </main>
    <CartVue></CartVue>
</template>

<script>
import HeaderVue from './views/Header.vue';
import CartVue from './views/Cart.vue';
export default{
  data(){
    return{
      num : 0,
    }
  },
  components:{
    HeaderVue,
    CartVue,
  },
  methods: {
    setNun( n ){
      this.num = n ;
      switch(n){
        case 0:
          this.$router.push({
            path:'/goods'
          })
          break;
        case 1:
          this.$router.push({
            path:'/seller'
          })
          break;
        case 2:
          this.$router.push({
            path:'/ratings'
          })
          break;
      }
    },
  }
}
</script>

<style scoped>
.active{
  color: rgb(245, 20, 20);
}
main{
  width: 100%;
  height: 122vw;
  /* background-color: red; */
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
main>ul{
  width: 100%;
  height: 10.667vw;
  line-height: 10.667vw;
  color: rgb(75, 85, 93);
  text-align: center;
  display: flex;
  justify-content: space-around;
  border-bottom: 0.267vw solid rgba(7, 17, 27, .1);
}
main>ul>li{
  flex: 1;
}
main>div{
  flex: 1;
  /* background-color: aqua; */
}
</style>